<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>css3选择器</title> <!-- title标签的内容会同时也会作为搜索引擎中标题出现 -->
    <link href="../imgs/keai.gif" rel="shortcut icon"> <!-- 图标 -->
    <meta name="author" content="段永红">   <!-- 作者 --> 
    <meta name="keywords" content="css常用选择器"/> <!-- 搜索引擎网站标题关键字多个逗号隔开 -->
    <meta name="description" content="一个非常不错的网站"/> <!-- 搜索引擎网站描述介绍 -->

    <style>

        /*
            所有选择器权重(优先级)顺序：内联样式、id选择器、类和伪类选择器、元素选择器、通配(全局)选择器、继承样式(继承祖先样式没有优先级)
            强制设置最高优先、如：.c_class_three{color:red !important;} , 关键字!important, 优先级高于一切、不推荐使用只有在万不得已的时候使用、如果用了js都无法改变样式
        *

/* -------------------------指定选择器------------------------- */        
        /* h1 {color:blue;}  标签选择器 */
        /* #id_two {color: aqua;}  id选择器 */
        /* .class_three {color: red;} class选择器 */
        /* p.class_three {color:blue;}  复合选择器 */
        /* .class_three.class_p{color:red;}  交集选择器：满足2个class属性才可被选中 */
        /* h1, .class_three, #id_two {color:red;}   并集选择器、选中多个按逗号隔开 */
        
/* ------------------------- 属性选择器 ------------------------- */
        /*.class_p[title] {color:red;} /* 选中 .class_p 包含titile属性的 */
        /* p[title] {color:red;} /* 选中 p元素包含titile属性的 */
        /* p[title=abc] {color:red;}; /* 选中 p元素titile的属性值=abc的 */
        /* p[title^=abc] {color:red;}; /* 选中 p元素titile的属性值已abc开头的 */
        /* p[title$=abc] {color:red;}; /* 选中 p元素titile的属性值已abc结尾的 */
        /* p[title*=e] {color:red;}; /* 选中 p元素titile的属性值包含e的 */
        
/* ------------------------- 关系选择器 ------------------------- */
        /* * {color: red;}; /* 全局通用选择器 */
        /* .calss_section > div {color:red;}   /* 选中.calss_section下的所有div子元素 */
        /* .calss_section span {color:red;} /* 选中.calss_section下的所有span元素 */
        /* .calss_section * {color:red;} 选中.calss_section下的所有元素 */
        /* .class_three + p + span {color:red;}  /* 选中 .calss_section 兄弟标签下下个span */
        /* .class_three ~ * {color:red;}    选中 .class_three 所有后面的兄弟元素 */
        
/* ------------------------- ul li 伪类选择器------------------------------- */
        /* >表示仅限于子元素、孙子元素不算 */
        /*ul > li:first-child {color:red;}; /* 选中ul 下的第一个li元素、如果第一个不是li则不生效, 如果需要按同类型选中可以使用：first-of-type */
        /*ul > li:last-child {color:red;}; /* 选中ul 下的最后一个li元素、如果最后一个不是li则不生效, 如果需要按同类型选中可以使用：last-of-type */
        /*ul > li:nth-child(3) {color:red;}; /* 选中ul 下的第3个li元素、如果第3个不是li则不生效, 如果需要按同类型选中可以使用：nth-of-type(3) */
        /*ul > li:nth-child(n) {color:red;}; /* 选中ul 下的所以li元素, 如果需要按同类型选中可以使用：nth-of-type(n) */
        /*ul > li:nth-child(2n) {color:red;}; /* 选中ul 下的li元素、按偶数选中 2、4、6、8... , 或者直接写even, 如果需要按同类型选中可以使用：nth-of-type(2n)*/
        /*ul > li:nth-child(2n+1) {color:red;}; /* 选中ul 下的li元素、按基数选中 1、3、5、7..., 或者直接写odd, 如果需要按同类型选中可以使用：nth-of-type(2n+1) */        
        /* ul > li:not(:nth-of-type(3)) {color:red;}; /* 除了第三个li其他的全部选中 */
        /* 上面说的同类型指的是将ul里面的span排除掉再进行排序选择 */
/* ------------------------- 只针对a元素的选择器------------------------------- */
        a:link{color:green;} /* link只针对a标签, 作用：未访问过的进行设置央样式,访问过直接保存再缓存中 */
        a:visited{color: blueviolet; } /* visited只针对a标签, 作用：已访问过的进行设置颜色, 由于隐私问题visited里面只能设置颜色其他属性无效 */

/* ------------------------- 光标选择器------------------------------- */
        /* .c_title:hover{color: green};  /* hover光标移入样式 */
        /* .c_title:active{color: red};   /* active光标点击样式 */
        /* hover与active互斥, hover优先级高 */

/* ------------------------- 伪元素内容选择器 ------------------------- */
        /* 伪元素,表示页面中一些特殊并不真实存在的元素(特殊的位置), 伪元素使用 ::开头 */
        p.c_p_duanluo::first-letter {font-size: 50px;}   /* 表示第一个字母 */
        p.c_p_duanluo::first-line {background-color: yellow;} /* 表示第一行 */
        p.c_p_duanluo::selection {background-color: greenyellow;} /* 表示光标选中的内容 */
                
        div.c_div_wei::before {
            content: "abc"; /* 给内容最前插入css内容、该内容浏览器无法选中(无法必复制)  */
            color: red;
        }
        div.c_div_wei::after {
            content: "haha"; /* 给内容最后插入css内容、该内容浏览器无法选中(无法必复制) */
            color: blue;
        }

        input:focus{color: red;}/* 获取输入框焦点 */

    </style>
</head>
<body>
    <section class="calss_section">
        <h1 class="c_title">静夜思</h1>
        <p class="class_p" title="abc">窗前明月光</p>
        <p id="id_two" title="helloabc">疑是地上霜</p>
        <p class="class_three class_three_1 class_p">举头望明月</p>
        <p class="class_p" title="abcdef">低头思故乡</p>
        
        <span>最好的诗词span_1
            <p>&nbsp;最好的诗词p_1_1</p>        
        </span>

        <div>
            <span>最好的诗词span_2</span>
            <p>最好的诗词p_3</p>
        </div>
        
        <hr>
        <ul>
            <span>第0个span</span>
            <li class="c_first">第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>            
        </ul>
        
        <a href="#">超链接</a>
        
    </section>

    <hr>
    <!-- ****************伪元素内容选择器**************** -->
    <SECtion>
        <div class="c_div_wei"><q>hello how are you</q></div>
        <p class="c_p_duanluo">今天遇到交警查酒驾，喝了半斤多。过去我说，我先吹，交警一股酒气，让我吹。结果是200，然后还要被扣留，问我车在哪。我说我的朋友是步行来的，只是想看看你的这个东西能不能用</p>
    </SECtion>
</body>
</html>